<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>教师管理列表</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>

    <div th:include="common/common.html :: commonheader"></div>

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common/common.html :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:replace="common/common.html :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                教师管理
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">学籍管理系统</a>
                </li>
                <li>
                    <a href="#">教师管理</a>
                </li>
                <li class="active">教师管理表</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <header class="panel-heading">
                        学生信息表
                    </header>
                    <div class="panel-body">
                        <div class="adv-table">
                            <div class="adv-table">
                                <!-- 添加按钮 -->
                                <button id="tch_add_btn" type="button" class="btn btn-success" data-toggle="modal"
                                        data-target="#tch_add_modal">
                                    添加记录
                                </button>
                                <button class="btn btn-danger" id="tch_delete_all" th:pn="${page.pages}">批量删除</button>
                                <table class="display table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center" width="20px">
                                            <input type="checkbox" id="check_all"/>
                                        </th>
                                        <th style="text-align: center">工号</th>
                                        <th style="text-align: center">姓名</th>
                                        <th style="text-align: center">性别</th>
                                        <th style="text-align: center">联系方式</th>
                                        <th style="text-align: center">邮箱</th>
                                        <th style="text-align: center">入职时间</th>
                                        <th style="text-align: center">职称</th>
                                        <th style="text-align: center">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="teacher,stat:${teachers}">
                                        <td style="text-align: center"><input type='checkbox' class='check_item'/></td>
                                        <td style="text-align: center" th:text="${teacher?.getTId()}"></td>
                                        <td style="text-align: center" th:text="${teacher?.tName}"></td>
                                        <td style="text-align: center" th:text="${teacher?.tSex==0? '男':'女'}"></td>
                                        <!--                                    <td style="text-align: center" th:text="${teacher?.tIdNumber}"></td>-->
                                        <!--                                    <td style="text-align: center" th:text="${teacher?.tAddress}"></td>-->
                                        <td style="text-align: center" th:text="${teacher?.tPhone}"></td>
                                        <td style="text-align: center" th:text="${teacher?.tEmail}"></td>
                                        <td style="text-align: center"
                                            th:text="${#dates.format(teacher?.tDate.getTime(),'yyyy-MM-dd')}"></td>
                                        <td style="text-align: center" th:text="${teacher?.tPosition}"></td>
                                        <!-- 操作按钮 -->
                                        <td style="text-align: center;" class="center hidden-phone">
                                            <button data-toggle="modal" data-target="#tch_update_modal"
                                                    th:address="${teacher?.getTAddress()}" th:pn="${page.pages}"
                                                    type="button" class="btn btn-info update_btn">修改
                                            </button>
                                            <button data-toggle="modal" data-target="#tch_info_modal"
                                                    th:tIdNum="${teacher?.getTIdNumber()}"
                                                    type="button" class="btn btn-primary info_btn">详细信息
                                            </button>
                                            <a th:href="@{/deleteTeacher/{tId}(tId=${teacher?.tId},pn=${page.current})}"
                                               class="btn btn-danger del_btn">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="row-fluid">
                                    <div class="dataTables_info">
                                        当前第[[${page.current}]]页,
                                        共[[${page.pages}]]页,
                                        共[[${page.total}]]条数据
                                    </div>
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination">
                                            <!-- 上一页 -->
                                            <li th:if="${page.current > 1}" th:class="prev"><a
                                                    th:href="@{'/teacher_table?pn='+ ${page.current - 1}}">上一页</a></li>
                                            <li th:if="${page.current <= 1}" th:class="disabled"><span>上一页</span></li>
                                            <!-- 不足5页 -->
                                            <li th:if="${page.pages <= 5}"
                                                th:class="${page.current == num ? 'active':''}"
                                                th:each="num : ${#numbers.sequence(1,page.pages)}">
                                                <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                                <a th:if="${page.current != num}"
                                                   th:href="@{'/teacher_table?pn='+${num}}">[[${num}]]</a>
                                            </li>
                                            <!-- 够5页 -->
                                            <div th:if="${page.pages > 5}">
                                                <!-- 前5页 -->
                                                <li th:if="${page.current < 3}"
                                                    th:class="${page.current == num ? 'active':''}"
                                                    th:each="num : ${#numbers.sequence(1,5)}">
                                                    <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                                    <a th:if="${page.current != num}"
                                                       th:href="@{'/teacher_table?pn='+${num}}">[[${num}]]</a>
                                                </li>
                                                <!-- 中间页码 -->
                                                <li th:if="${page.current >= page.pages - 2 and page.current <= page.pages}"
                                                    th:class="${page.current == num ? 'active':''}"
                                                    th:each="num : ${#numbers.sequence(page.pages - 4,page.pages)}">
                                                    <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                                    <a th:if="${page.current != num}"
                                                       th:href="@{'/teacher_table?pn='+${num}}">[[${num}]]</a>
                                                </li>
                                                <!-- 最后5页 -->
                                                <li th:if="${page.current > 2 and page.current < page.pages - 2}"
                                                    th:class="${page.current == num ? 'active':''}"
                                                    th:each="num : ${#numbers.sequence((page.current)-2,(page.current)+2)}">
                                                    <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                                    <a th:if="${page.current != num}"
                                                       th:href="@{'/teacher_table?pn='+${num}}">[[${num}]]</a>
                                                </li>
                                            </div>
                                            <!-- 下一页 -->
                                            <li th:if="${page.current < page.pages}" th:class="next"><a
                                                    th:href="@{'/teacher_table?pn='+ ${page.current + 1}}">下一页</a></li>
                                            <li th:if="${page.current >= page.pages}" th:class="disabled">
                                                <span>下一页</span>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--body wrapper end-->

            <!--footer section start-->
            <div th:replace="common/common.html :: footer"></div>
            <!--footer section end-->


        </div>
        <!-- main content end-->
    </div>
</section>

<!-- 添加模态框 -->
<div class="modal fade" id="tch_add_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="tch_add_modal_close" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">教师添加</h4>
            </div>

            <div class="modal-body">
                <form id="tch_add_form" class="form-horizontal" th:action="@{/teacher}" method="post">

                    <div class="form-group">
                        <label for="tName_from_add"
                               class="col-sm-2 control-label">*姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tName"
                                   id="tName_from_add" placeholder="姓名" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">*性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="tSex" id="gender1_add_input"
                                       value="0" checked="checked">
                                男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="tSex" id="gender2_add_input"
                                       value="1"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tIdNumber_from_add"
                               class="col-sm-2 control-label">*身份证号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tIdNumber_from_add"
                                   name="tIdNumber"
                                   placeholder="身份证号码" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tPhone_from_add"
                               class="col-sm-2 control-label">*联系方式</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tPhone_from_add"
                                   name="tPhone"
                                   placeholder="联系方式" required="required">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="tAddress_from_add"
                               class="col-sm-2 control-label">*住址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tAddress_from_add"
                                   name="tAddress"
                                   placeholder="住址" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tEmail_from_add"
                               class="col-sm-2 control-label">*邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tEmail_from_add"
                                   name="tEmail"
                                   placeholder="邮箱" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tPosition_from_add"
                               class="col-sm-2 control-label">*职称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tPosition_from_add"
                                   name="tPosition"
                                   placeholder="职称" required="required">
                        </div>
                        <input type="hidden" name="pn" th:value="${page.getPages()}">
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="tch_add_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="tch_add_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 修改模态框 -->
<div class="modal fade" id="tch_update_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="tch_update_modal_close" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">信息修改</h4>
            </div>

            <div class="modal-body">
                <form id="tch_update_form" class="form-horizontal" th:action="@{/updateTeacher}" method="post">
                    <input type="hidden" name="_method" value="PUT">
                    <div class="form-group">
                        <input type="hidden" id="tId_from_update" name="tId">
                        <input type="hidden" id="pn_from_update" name="pn">
                    </div>

                    <div class="form-group">
                        <label for="tName_from_update"
                               class="col-sm-2 control-label">*姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tName"
                                   id="tName_from_update" placeholder="姓名" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">*性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="tSex" id="gender1_update_input"
                                       value="0" checked="checked">
                                男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="tSex" id="gender2_update_input"
                                       value="1"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tPhone_from_update"
                               class="col-sm-2 control-label">*联系方式</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tPhone_from_update"
                                   name="tPhone"
                                   placeholder="联系方式" required="required">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="tAddress_from_update"
                               class="col-sm-2 control-label">*住址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tAddress_from_update"
                                   name="tAddress"
                                   placeholder="住址" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tEmail_from_update"
                               class="col-sm-2 control-label">*邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tEmail_from_update"
                                   name="tEmail"
                                   placeholder="邮箱" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tPosition_from_update"
                               class="col-sm-2 control-label">*职称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tPosition_from_update"
                                   name="tPosition"
                                   placeholder="职称" required="required">
                        </div>
                        <input type="hidden" name="pn" th:value="${page.getPages()}">
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="tch_update_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="tch_update_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 详细信息模态框 -->
<div class="modal fade" id="tch_info_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="tch_info_modal_close" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2">信息修改</h4>
            </div>

            <div class="modal-body">
                <form id="tch_info_form" class="form-horizontal">

                    <div class="form-group">
                        <label for="tName_from_info"
                               class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" name="tName"
                                   id="tName_from_info" placeholder="姓名" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input disabled type="radio" name="tSex" id="gender1_info_input"
                                       value="0" checked="checked">
                                男
                            </label>
                            <label class="radio-inline">
                                <input disabled type="radio" name="tSex" id="gender2_info_input"
                                       value="1"> 女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tIdNum_from_info"
                               class="col-sm-2 control-label">身份证号</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="tIdNum_from_info"
                                   name="tIdNum"
                                   placeholder="身份证号" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tPhone_from_info"
                               class="col-sm-2 control-label">联系方式</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="tPhone_from_info"
                                   name="tPhone"
                                   placeholder="联系方式" required="required">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="tAddress_from_info"
                               class="col-sm-2 control-label">住址</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="tAddress_from_info"
                                   name="tAddress"
                                   placeholder="住址" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tEmail_from_info"
                               class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="tEmail_from_info"
                                   name="tEmail"
                                   placeholder="邮箱" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tPosition_from_info"
                               class="col-sm-2 control-label">职称</label>
                        <div class="col-sm-10">
                            <input disabled type="text" class="form-control" id="tPosition_from_info"
                                   name="tPosition"
                                   placeholder="职称" required="required">
                        </div>
                    </div>

                </form>
            </div>

            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>


<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<script type="text/javascript">
    $(function () {

        // 点击 添加按钮
        $("#tch_add_enter").click(function () {
            let tName = $("#tName_from_add").val();
            let tIdNum = $("#tIdNumber_from_add").val();
            if (tName === "" || tIdNum === "") {
                alert("请确保信息都填写")
                return false;
            }

            document.getElementById("tch_add_form").submit();
        });

        // 取消添加
        $("#tch_add_cancel").click(function () {
            $("#tch_add_form")[0].reset();
        });

        // 取消修改
        $("#tch_update_cancel").click(function () {
            $("#tch_add_form")[0].reset();
        });

        // 关闭添加 模态框
        $("#tch_add_modal_close").click(function () {
            $("#tch_add_form")[0].reset();
        });

        // 关闭 修改 模态框
        $("#tch_add_modal_close_update").click(function () {
            $("#tch_add_form")[0].reset();
        });

        // 点击修改按钮
        $(document).on("click", ".update_btn", function () {
            // 获取 按钮所在行的 tch信息
            let tId = $(this).parents("tr").find("td:eq(1)").text();
            let tName = $(this).parents("tr").find("td:eq(2)").text();
            let tSex = $(this).parents("tr").find("td:eq(3)").text();
            let tPhone = $(this).parents("tr").find("td:eq(4)").text();
            let tEmail = $(this).parents("tr").find("td:eq(5)").text();
            let tPosition = $(this).parents("tr").find("td:eq(7)").text();
            let tAddress = $(this).attr("address");
            let pn = $(this).attr("pn");

            // 将tch 信息 添加到 修改 模态框中
            $("#tName_from_update").val(tName);
            if (tSex === "女") {
                $("#gender2_update_input").attr("checked", "checked");
            }
            $("#tPhone_from_update").val(tPhone);
            $("#tEmail_from_update").val(tEmail);
            $("#tPosition_from_update").val(tPosition);
            $("#tAddress_from_update").val(tAddress);
            $("#tId_from_update").val(tId);
            $("#pn_from_update").val(pn);
        });

        // 点击确定修改按钮
        $("#tch_update_enter").click(function () {
            $("#tch_update_form").submit();
        });


        // 点击查看详细信息按钮
        $(document).on("click", ".info_btn", function () {

            // 获取 按钮所在行的 tch信息
            let tName = $(this).parents("tr").find("td:eq(2)").text();
            let tSex = $(this).parents("tr").find("td:eq(3)").text();
            let tPhone = $(this).parents("tr").find("td:eq(4)").text();
            let tEmail = $(this).parents("tr").find("td:eq(5)").text();
            let tPosition = $(this).parents("tr").find("td:eq(7)").text();
            let tAddress = $(this).parents("td").find("button:eq(0)").attr("address");
            let tIdNum = $(this).attr("tIdNum");

            // 将tch 信息 添加到 修改 模态框中
            $("#tName_from_info").val(tName);
            if (tSex === "女") {
                $("#gender2_info_input").attr("checked", "checked");
            }
            $("#tPhone_from_info").val(tPhone);
            $("#tEmail_from_info").val(tEmail);
            $("#tPosition_from_info").val(tPosition);
            $("#tAddress_from_info").val(tAddress);
            $("#tIdNum_from_info").val(tIdNum);

        });

        // 全选按钮
        $("#check_all").click(function () {
            let checked = $(this).prop("checked");
            $(".check_item").prop("checked", checked);
        });

        // 实现批量删除
        $("#tch_delete_all").click(function () {
            let tNames = "";
            let tIds = "";

            $.each($(".check_item:checked"), function () {
                tNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
                tIds += $(this).parents("tr").find("td:eq(1)").text() + "-";
            });
            tNames = tNames.substring(0, tNames.length - 1);
            tIds = tIds.substring(0, tIds.length - 1);
            if (confirm("你确定要删除【" + tNames + "】吗?")) {
                // 发送 Ajax请求 批量删除
                let pn = $("#tch_delete_all").attr("pn");
                $.ajax({
                    url: "/deleteTeacher/" + tIds + "?pn=" + pn,
                    type: "GET",
                    success: function(result) {
                        location.reload();
                    }
                });
            }


        });

        // 全选 按钮 和 单个 按钮的关系
        $(document).on("click", ".check_item", function () {
            let len = $(".check_item:checked").length;
            let flag = len === $(".check_item").length;
            $("#check_all").prop("checked", flag);
        });

    });
</script>

</body>
</html>
